import React,{useState} from 'react'
import * as antd from 'antd'


export default function UseState(props){
  console.log("---------- render UseState ----------")
  const [n,setN] = useState(0)
  // console.log(`n:${n}`)

  const test1 = function(){
    setN(n+1);

    // setN是异步的,所以这里的n还是之前的值
    console.log(n)
  }

  const xxx = function() {
    setN(oldValue => {
      console.log(`前一个值是${oldValue}`)
      console.log(`前一个值是${n}`)
      return oldValue + 2;
    })
  }



  const [ar,setAr] = useState([])
  function add(){
    setAr([...ar,"i_" + Math.random()])
  }
  


  return (
    <div>
      <h4>useState</h4>
     n :  {n} <antd.Divider type="vertical"></antd.Divider>
      <antd.Button onClick={test1} type="primary"> +1 </antd.Button>
<br/>
      由console输出结果可以看出，每次输出都是上次的旧值，得不到最新的值，
      <br/>在类组件是通过 setstate 第二个参数回调函数得到更新后的最新值.
      <br/>函数组件中一般使用 useEffect 的第二个参数来监听我们需要变化的值，来获取变化后的最新值，但这并不适用于所有情况，
      <br/>所以如果同步改变数据，可以使用useRef来保存同步数据(但useRef改变值不会触发渲染)
      <antd.Divider></antd.Divider>
      <antd.Button onClick={xxx} type="primary"> 依赖于前一个值 </antd.Button>

      <antd.Divider></antd.Divider>
      值：{JSON.stringify(ar)}<br/>
      <antd.Button onClick={add} type="primary"> 数组测试 </antd.Button>
    </div>
  )
}

